<template>
  <div id="login-container">
    <el-form :ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">小红做的第一个项目</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(form)">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {login,getUserInfo} from '@/api/login'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        password:[
          { required: true, message: "请输入密码", trigger: "blur" },
          {min: 6, max: 12,  message: "长度在6~12个字符之间", trigger: "blur"},
        ]
      },
    };
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {  //验证成功
            this.$store.dispatch('Login',this.form).then(response=>{
              if(response.flag){
                this.$router.push('/')
              }else{
                this.$message({
                  message:response.message,
                  type:'warning'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
};
</script>
<style scoped>
#login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/login-bg.jpg");
}
.login-form {
  width: 350px;
  /* background-color: cornsilk; */
  height: 250px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  position: absolute;
  /* margin: 150px auto auto 575px; */
}
.login-title {
  color: #a03939;
  /* text-align: center; */
  padding-left: 100px;
}
</style>